---
title: 安裝
description: 使用 RainbowKit 快速上手
---

# 安裝

## 使用 RainbowKit 快速上手

### 快速開始

您可以使用您喜歡的包管理器，通過以下其中一個命令搭建一個新的 RainbowKit + [wagmi](https://wagmi.sh) + [Next.js](https://nextjs.org) 應用程序。

```bash
npm init @rainbow-me/rainbowkit@latest
# or
pnpm create @rainbow-me/rainbowkit@latest
# or
yarn create @rainbow-me/rainbowkit
```

這將提示您輸入項目名稱，生成包含樣板項目的新目錄，並安裝所有必需的依賴項。

或者，您可以手動將 RainbowKit 集成到您現有的項目中。

### 手動設置

安裝 RainbowKit 及其對應的依賴項 [wagmi](https://wagmi.sh/), [viem](https://viem.sh) 與 [@tanstack/react-query](https://tanstack.com/query/v5)。

```bash
npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query
```

> 注意：RainbowKit 是一個 [React](https://reactjs.org/) 庫。

#### 導入

導入 RainbowKit、Wagmi 和 TanStack Query。

```tsx
import '@rainbow-me/rainbowkit/styles.css';

import {
  getDefaultConfig,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import {
  mainnet,
  polygon,
  optimism,
  arbitrum,
  base,
} from 'wagmi/chains';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";
```

#### 配置

配置您希望的鏈並生成所需的連接器。您還需要設置 `wagmi` 配置。如果您的 dApp 使用服務端渲染（SSR），請確保將 `ssr` 設置為 `true`。

> 注意：每個依賴於 WalletConnect 的 dApp 現在都需要從 [WalletConnect Cloud](https://cloud.walletconnect.com/) 獲取 `projectId`。這是完全免費的，只需幾分鐘即可完成。

```tsx line=4-99
...
import { getDefaultConfig } from '@rainbow-me/rainbowkit';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, polygon, optimism, arbitrum, base],
  ssr: true, // If your dApp uses server side rendering (SSR)
});
```

#### 包裝提供者

用 `RainbowKitProvider`、[`WagmiProvider`](https://wagmi.sh/react/api/WagmiProvider#wagmiprovider) 和 [`QueryClientProvider`](https://tanstack.com/query/v4/docs/framework/react/reference/QueryClientProvider) 包裝您的應用程序。

```tsx
const queryClient = new QueryClient();

const App = () => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          {/* Your App */}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};
```

#### 添加連接按鈕

然後，在您的應用程序中，導入並渲染 `ConnectButton` 組件。

```tsx
import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};
```

RainbowKit 現在將處理用戶的錢包選擇，顯示錢包/交易信息並處理網絡/錢包切換。

#### 額外建置工具設置

某些構建工具需要額外的設置。

##### Remix

使用 [Remix](https://remix.run) 時，您必須為 `buffer`、`events` 和 `http` 模塊進行 polyfill。參考下方 Remix 配置，或[我們的示例 Remix 項目](https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-remix)。

```ts
/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/.*"],
  browserNodeBuiltinsPolyfill: {
    modules: { buffer: true, events: true, http: true },
  },
};
```

### 準備部署

默認情況下，您的 dApp 使用公共 RPC 提供商為每條鏈獲取餘額、解析 ENS 名稱等。這經常會導致用戶的可靠性問題，因為公共節點有速率限制。您應該通過 [Alchemy](https://www.alchemy.com/) 或 [QuickNode](https://www.quicknode.com/) 等服務購買 RPC 提供商的訪問權限，並在 Wagmi 中定義您自己的傳輸層。這可以通過在 `getDefaultConfig` 中添加 `transports` 參數或通過 Wagmi 的 `createConfig` 直接實現。

傳輸層是處理向以太坊節點提供商（例如 Alchemy、Infura 等）發送 JSON-RPC 請求的網絡中間層。

**使用 `http` 傳輸層的示例**

```tsx
import { getDefaultConfig } from '@rainbow-me/rainbowkit';
import { http } from 'wagmi';
import { mainnet, sepolia } from 'wagmi/chains';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/...'),
    [sepolia.id]: http('https://eth-sepolia.g.alchemy.com/v2/...'),
  },
});
```

有關更多詳細信息，請查看 [wagmi 傳輸文件](https://wagmi.sh/core/api/transports#transports)。

### 添加您自己的功能

現在，您的用戶可以連接他們的錢包，您可以開始使用 [wagmi](https://wagmi.sh) 建立應用程序的其餘部分。

使用 wagmi 的全面 React 鉤子套件發送交易、與合約互動、解析 ENS 詳細信息等。

有關更多詳細信息，請查看 [wagmi 文檔](https://wagmi.sh)。

### 進一步的示例

要查看一些正在運行的 RainbowKit 示例，或者甚至用它們自動搭建新項目，請查看 [官方示例](https://github.com/rainbow-me/rainbowkit/tree/main/examples)。

要直接在瀏覽器中嘗試 RainbowKit，請查看以下 CodeSandbox 鏈接：

- 與 [Create React App](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-create-react-app)
- 與 [Next.js](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-next)
- 與 [Next.js App Router](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-next-app)
- 與 [Remix](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-remix)
- 與 [Vite](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-vite)
- 與 [React Router](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-react-router)
